<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<title>Document</title>-->
    <link rel="stylesheet" href="/static/app/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/app/css/style.css">
    <link rel="stylesheet" href="/static/app/css/css/style.css">
    <script src="/static/app/lib/zy.rem.js"></script>
    <script src="/static/app/lib/jquery1.12.3.min.js"></script>
    <script src="/static/app/js/base.js"></script>
    <script src="/static/layer/layer.min.js"></script>

</head>
<style>
    .sb-info .sb-name {
        font-size: .2rem;
        color: #4c4c4c;
    }
    .pick {
        background: white;
        border-radius: .04rem;
        margin-top: 0.2rem;
    }
    .center {
        padding: 0.1rem 0.3rem 0.3rem 0.3rem;
    }
    .fences{
        width: 70%;
        height: 0.5rem;
        margin-left: 0.5rem;
        margin-top: 0.3rem;
        font-size: 0.25rem;
    }
    .en_name{
        font-size: 0.2rem;
        padding-left: 0.2rem;
    }
    .radius{
        font-size: 0.2rem;
        padding-left: 0.2rem;
     }
    .fen{
        width: 70%;
        height: 0.5rem;
        margin-left: 0.5rem;
        margin-top: -0.2rem;
        font-size: 0.25rem;
    }
    .address{
        width: 82%;
        height: 0.5rem;
        margin-left: 0.5rem;
        /*margin-top: 0.3rem;*/
        font-size: 0.2rem;

    }
    .slider-v2 {
        width: 0;
    }
</style>
<body>
<div class="header">
    <div><a href="{:url('Core/index')}"><img src="/static/app/img/fanh.png"></a></div>
    <div>安全围栏</div>
    <div><a onclick="a_button('{:url(\'Map/fence\')}')" class="head-btn iconfont">&#xe601;</a></div>
</div>
<div class="center">
    {foreach name="res" key="key" item="v"}
    <div class="pick">
        <div class="top">
            <input type="hidden" value="{$v.id}" class="id">

            <div class="fences">名称:<span class="en_name">{$v.en_name}</span></div>
            <div class="anniu"> <input type="checkbox" id="{$v.id}"  class="{$v.id}" onclick="btn({$v.id},{$v.state})" value="{$v.state}" {if $v.state eq 1}checked=""{/if}/>
                <label class="slider-v2" for="{$v.id}"></label></div>

            <div class="fen">范围:<span class="radius">周围{$v.radius}米</span></div>
            <div class="address">{$v.address}</div>
            <img src="/static/app/img/shan.png" class="imges" onclick="det({$v.id})"/>
            </div>
        </div>
    {/foreach}
</div>

<!--<div class="footer">-->
    <!--<a href="{:url('Map/mapdata')}">-->
        <!--<img src="/static/app/img/bot-b1.png"/>-->
        <!--<span>地图</span>-->
    <!--</a>-->
    <!--<a href="{:url('Map/route')}">-->
        <!--<img src="/static/app/img/bot-d1.png"/>-->
        <!--<span>轨迹</span>-->
    <!--</a>-->
    <!--<a href="javascript:;" class="this">-->
        <!--<img src="/static/app/img/bot-a.png"/>-->
        <!--<span>定位器</span>-->
    <!--</a>-->
    <!--<a href="{:url('Core/index')}">-->
        <!--<img src="/static/app/img/bot-c1.png"/>-->
        <!--<span>我的</span>-->
    <!--</a>-->
<!--</div>-->
</body>
<script>
    function a_button($url){
        //判断是否有绑定设备
        $equ=0;
        {notempty name="$Think.session.dev_name.0"}
        $equ={$Think.session.dev_name.0};
        {/notempty}
            if ($equ==0){
                console.log('没有设备');
                layer.confirm('您未绑定设备', {btn: ["去绑定","取消"], shade:0.1 }, function(index){
                    window.location.replace("{:url('Core/add')}");
                });
            }else {
                console.log(11);
                window.location.replace($url);
            }

        }

        function btn(id,state) {
            $id =id;
            $state =state;
                $.ajax({
                    url: "{:url('Map/fenedit')}",
                    type: 'POST',
                    data: {
                        id:$id,
                        state:$state
                    },
                    dataType: 'json',
                    success: function (res) {
                        $i = res.data.id
                        if (res.code != 200) {
                            layer.msg(res.msg, {shade: 0.5, time: 1000,icon: 2});
                            return false;
                        }
                        if($state ==1){
                            $state=$("input[id="+$i+"]").val(2);
                        }else {
                            $state=$("input[id="+$i+"]").val(1);
                        }
                    }
                });

        }
    // $(function () {

        // //修改
        // $("#s3").change(function() {
        //    $state=$("input[type='checkbox']").attr('value');
        //    $id =$('.id').val();
        //     $.ajax({
        //         url: "{:url('Map/fenedit')}",
        //         type: 'POST',
        //         data: {
        //             id:$id,
        //             state:$state
        //         },
        //         dataType: 'json',
        //         success: function (res) {
        //             if (res.code != 200) {
        //                 layer.msg(res.msg, {shade: 0.5, time: 1000,icon: 2});
        //                 return false;
        //             }
        //             if($state ==1){
        //                 $state=$("input[type='checkbox']").val(2);
        //             }else {
        //                 $state=$("input[type='checkbox']").val(1);
        //             }
        //         }
        //     });
        // });
    // })
    //删除
    function det(obj) {
//        $id =$('.id').val();
        $.ajax({
            url: "{:url('Map/det')}",
            type: 'POST',
            data: {
                id:obj
            },
            dataType: 'json',
            success: function (res) {
                if (res.code != 200) {
                    layer.msg(res.msg, {shade: 0.5, time: 1000,icon: 2});
                    return false;
                }
                window.location.reload();
            }
        });
    }
</script>
</html>